<html>
<head>
<title>Project BlimBlam</title>


<style type="text/css">

p {
	font:25px black trebuchet;
	font-face:bold;
}

body {
	background-image:url('http://static1.grsites.com/archive/textures/beige/beige114.jpg');
	overflow-x:hidden;
}

#forumOverflow {
	height: 270;
	overflow:auto;
}

#groupOverflow {
	height:140;
	overflow:auto;
}

#sidebar {
	width:20%;
	padding:20;
	position: absolute;
	top: 10px;
	left: 30px;
	background-color:#ffcc66;
}

#groupBox {
	width:50%;
	height:170;
	padding:20;
	position:relative;
	left:22%;
	font-size:18px;
	font-family:trebuchet;
	background-color:#ffcc66;
}

#groupLabel {
	font:25px black trebuchet;
}

#forumBox {
	width:50%;
	height:300;
	padding:20;
	position:relative;
	left:22%;
	font-size:25px;
	font-family:trebuchet;
	background-color:#ffcc66;
}

#profilePic {
	width:200px;
	height:200px;

</style>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">

</script>

</head>
<body scroll="no">

<fieldset id="sidebar">
	<center>
	<img src="faceless.jpg" alt="User's Profile Picture" hspace="20" id="profilePic"><br /> 

	
	<p> </p>
	<a href="editProfile.html">Edit Profile</a> &nbsp &nbsp <a href="createGroup.html">Create New Group</a><br />
	<div id="scriptInDiv"><script src="http://www.gmodules.com/ig/ifr?url=http://www.schulz.dk/pacman.xml&amp;up_LANG=en&amp;synd=open&amp;w=260&amp;h=340&amp;title=PacMan+v2.6&amp;lang=all&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script></div><br />
	<img src="prev.gif" id="prevbutton"><img src="next.gif" id="nextbutton">
	</center>
</fieldset>
	
<table cellmargin="20" border="0">
	<tr>
		<td><img src="blimblamlogo.png" align="right" hspace="500" border='0'></td>
	</tr>
	<tr height="200px" align="top">
		<td id="groupCell">
			<fieldset id="groupBox">
				<legend id="groupLabel">&nbsp My Groups &nbsp </legend>
				<div id="groupOverflow"></div>
			</fieldset>
		</td>
	</tr>
	<tr height="400px">
		<td id="forumCell">
			<fieldset id="forumBox">
				<legend>&nbsp Forum &nbsp </legend>
				<div id="forumOverflow">
					<textarea id="chatArea" cols ='100' rows='10' disabled></textarea> <input type="submit" value="Send" id="sendButton" onclick="sendAndUpdateChat();"/>
					<textarea cols ='100' rows='2'></textarea>
				</div>
			</fieldset>
		</td>
	</tr>
</table>

<script type="text/javascript">

var nextButton = document.getElementById('nextbutton');

currentIndex = 0;

var sendButton = document.getElementById('sendButton')
sendButton.onclick = sendAndUpdateChat;
chatArea.innerHTML = "";



</script>

</head>
<body scroll="no">

<fieldset id="sidebar">
	<center>
	<img src="faceless.jpg" alt="User's Profile Picture" hspace="20" id="profilePic"><br /> 

	
	<p>	<a href="editProfile.html">Edit Profile</a> &nbsp &nbsp <a href="createGroup.html">Create New Group</a><br />
	<div id="scriptInDiv"><script src="http://www.gmodules.com/ig/ifr?url=http://www.schulz.dk/pacman.xml&amp;up_LANG=en&amp;synd=open&amp;w=260&amp;h=340&amp;title=PacMan+v2.6&amp;lang=all&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script></div><br />
	<img src="prev.gif" id="prevbutton"><img src="next.gif" id="nextbutton">
	</center>
</fieldset>
	
<table cellmargin="20" border="0">
	<tr>
		<td><img src="blimblamlogo.png" align="right" hspace="500" border='0'></td>
	</tr>
	<tr height="200px" align="top">
		<td id="groupCell">
			<fieldset id="groupBox">
				<legend id="groupLabel">&nbsp My Groups &nbsp </legend>
				<div id="groupOverflow"></div>
			</fieldset>
		</td>
	</tr>
	<tr height="400px">
		<td id="forumCell">
			<fieldset id="forumBox">
				<legend>&nbsp Forum &nbsp </legend>
				<div id="forumOverflow">
					<textarea cols ='100' rows='10' disabled id="chatArea"></textarea> <input type="submit" value="Send" id="sendButton" />
					<textarea cols ='100' rows='2' id="message"></textarea>
				</div>
			</fieldset>
		</td>
	</tr>
</table>

<script type="text/javascript">

var nextButton = document.getElementById('nextbutton');

currentIndex = 0;



function switchGadget(event) {

	var gamesArray = [
"http://www.gmodules.com/ig/ifr?url=http://www.schulz.dk/pacman.xml&amp;up_LANG=en&amp;synd=open&amp;w=290&amp;h=340&amp;title=PacMan+v2.6&amp;lang=all&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=html","http://www.gmodules.com/ig/ifr?url=http://www.counttonine.com/google-sudoku.xml&amp;up_difficulty=easiest&amp;synd=open&amp;w=320&amp;h=370&amp;title=Sudoku&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=html","http://www.gmodules.com/ig/ifr?url=http://throttled.org/googlegadgets/youtubesearch.xml&amp;synd=open&amp;w=320&amp;h=250&amp;title=Search+YouTube&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=html", "http://www.gmodules.com/ig/ifr?url=http://bejeweledg.googlecode.com/svn/trunk/bejeweled.xml&amp;synd=open&amp;w=320&amp;h=270&amp;title=Bejeweled&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=html"]
	
	var scriptSrc = document.getElementById('scriptInDiv').innerHTML;
	if (event.target.id == 'nextbutton'){
		if (currentIndex ==3){
			currentIndex = 0;
		} else {
			currentIndex ++;
		}
	} else if (event.target.id == 'prevbutton'){
		if (currentIndex == 0){
			currentIndex = 3;
		} else {
			currentIndex = currentIndex - 1;
		}
	}
	
	document.getElementById('scriptInDiv').innerHTML = '<iframe width="260" height="340" src="http://www.gmodules.com/ig/ifr?url=http://throttled.org/googlegadgets/youtubesearch.xml&synd=open&w=320&h=250&title=Search+YouTube&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=html" frameborder="0" scrolling="no"></iframe>';

}
nextButton.onclick = switchGadget;
</script>
</body>
</html>